<div class="row" id="myFeatures">
   <p class="font-increase  lead text-center">Features</p>
   <hr>
  </div> <!-- End of row -->
  <div class="row">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="images/feature1.jpg"  data-toggle="tooltip" data-placement="left" title="First Tooltip"  alt="">
        <div class="caption text-center">
          <h4> Lorem ipsum dolor sit.</h4>

          <a href="#" class="btn btn-info popyoda" data-toggle="popover" title="Popover TItle" data-content="this is a content"> Click Here</a>
        </div> <!-- End of caption -->
      </div><!-- End of thumbnail -->
    </div> <!-- End of col -->


  <div class="col-sm-4">
      <div class="thumbnail">
        <img src="images/feature2.jpg" data-toggle="tooltip" data-placement="top" title="Second Tooltip" alt="">
        <div class="caption text-center">
          <h4> Quos eum consectetur sint quisquam laboriosam ullam?</h4>
          <a href="#" class="btn btn-primary">Click Here</a>
        </div> <!-- End of caption -->
      </div><!-- End of thumbnail -->
    </div> <!-- End of col -->

    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="images/feature3.jpg" data-toggle="tooltip" data-placement="right" title="Third Tooltip" alt="">
        <div class="caption text-center">
          <h4> Lad qui magnam nihil cum cumque eligendi non suscipit architecto..</h4>
          <a href="#" class="btn btn-success">Click Here</a>
        </div> <!-- End of caption -->
      </div><!-- End of thumbnail -->
    </div> <!-- End of col -->



  </div> <!-- End of row -->